//需要初始化的图表数据
/*产用图表*/
var produce=[
    {
        name:'产',
        type:'line',
        lineStyle:'solid',
        color:'rgb(2,197,245)',
        areaStyle:{
            normal:{
                color:'rgba(2,197,245,0.6)'
            }
        }
    },
    {
        name:'用',
        type:'line',
        lineStyle:'solid',
        color:'rgb(136,70,255)',
        areaStyle:{
            normal:{
                color:'rgba(136,70,255,0.6)'
            }
        }
    }
];
var productOption={
        tooltip:{
            show:false
        },
        grid:{
            show:false,
            containLabel:true,
            left:'5%',
            top:5,
            bottom:0,
            right:0
        },
        xAxis:{
            axisLabel:{
                align:'center',
                interval:1
                
            },
            axisTick:{
                interval:0,
                length:3
            },
            z:100
        },
        yAxis:{
            // min:800000,
            //max:900000,
            interval:1000000000000,
            axisLabel:{
                formatter:function (value, index) {
                    //(value/Math.pow(10,5)).toFixed(1);
                    return Math.floor(value/Math.pow(10,4));
                }
            },
            axisTick:{
                show:false,
                inside:false
            }
        }
    };
/*主管压力放散*/
var pressure=[
    {name:'压力历史',type:'line',lineStyle:'solid',color:'#b0e9fd'},
    {name:'压力预测',type:'line',lineStyle:'dotted',color:'#b0e9fd'},
    {name:'放散历史',type:'line',lineStyle:'solid',yAxisIndex: 1,color:'#ff3a34'},
    {name:'放散预测',type:'line',lineStyle:'dotted',yAxisIndex: 1,color:'#ff3a34'}
];
var pressureOption={
    tooltip:{
        show:true,
        formatter:function(params){
            var nameArr = [];
            var valueArr = [];
            var str = '';
            for(var i=0;i<params.length;i++){
                nameArr[i]=params[i].seriesName;
                valueArr[i]=Number(params[i].data).toFixed(1);

                str+= nameArr[i]+' : '+valueArr[i]+'<br/>'
            }
            return str
        }
    },
    grid:{
        right:40
    },
    yAxis:[
        {
            splitLine: {
                show: false
            },
            axisLabel:{
                show:true,
                inside:false,
                align:'left',
                color:'#b0e9fe',
                fontSize:12,
                formatter:function (value, index) {
                   var val=Math.floor(value);
                   return val;
                }
            },
            type:'value',
            name:'压力(kPa)',
            nameTextStyle:{
                color:'#b0e9fe',
                fontSize:12,
                align:'left',
                padding:[3, 4, 5, 6]
            },
            axisLine:{
                lineStyle:{
                    color:'#b0e9fe'

                }
            },
            axisTick:{
                inside:true
            }
        },{
            splitLine: {
                show: false
            },
            axisLabel:{
                show:true,
                inside:false,
                align:'left',
                color:'#b0e9fe',
                fontSize:12,
                formatter:function (value, index) {
                   return value;
                }
            },
            type:'value',
            name:'放散开度',
            nameTextStyle:{
                color:'#d31d11',
                fontSize:12,
                align:'left',
                padding: [5, 0]
            },
            axisLine:{
                lineStyle:{
                    color:'#d31d11'

                }
            },
            axisTick:{
                inside:true
            },
            show:true
        }
    ]
};
//中央事件处理总线
var bus=new Vue();
/*头部导航组件*/
Vue.component('header-nav',{
    props:[''],
    data:function(){
        return {
        	linkList:[
        		{link:'gaolu.html',title:'高炉'},
        		{link:'hotwind.html',title:'热风炉'},
        		{link:'zhagang.html',title:'轧钢'},
        		{link:'guolu.html',title:'锅炉'},
        		{link:'dongdiao.html',title:'动调'},
                {link:'other.html',title:'其他部门'}
        	],
            analysisList:[
                {link:'analysis_hotwind.html',title:'煤气平衡'},
                {link:'analysis_zhagang.html',title:'轧钢质量'}
            ],
            museOpen:false,
        	isOpen:false,
            timeStamp:0,
            username:''
        }
    },
    filters:{
        formatterTime:function(val){
            var oDate=new Date(val);
            var year=oDate.getFullYear();
            var month=oDate.getMonth()+1;
            var date=oDate.getDate();
            var hour=oDate.getHours();
            var minute=oDate.getMinutes();
            return year+'年'+toDou(month)+'月'+toDou(date)+'日  '+toDou(hour)+':'+toDou(minute);
        }
    },
    template:`
        <header class="header header-skin skin inner-align header-border clearfix">
            <h1 class="header-logo fl">
                <a href="javascript:;"></a>
            </h1>
            <ul class="nav-list fl">
                <li class="nav-item fl">
                    <a href="../index.html">全网监控</a>
                </li>
                <li class="nav-item  fl nav--active posSup">
                    <a href="javascript:;" @click="isOpen=!isOpen">主操辅助</a>
                    <ul class="link-list posSub border" v-if="isOpen">
						<li v-for="item in linkList" class="border">
							<a :href="item.link" @click="isOpen=false">{{item.title}}</a>
						</li>
                    </ul>
                </li>
                <li class="nav-item fl">
                    <a href="javascript:;" @click="museOpen=!museOpen">优化分析</a>
                    <ul class="link-list posSub border" v-if="museOpen">
						<li v-for="item in analysisList" class="border">
							<a :href="item.link" @click="museOpen=false">{{item.title}}</a>
						</li>
                    </ul>
                </li>
            </ul>
            <div class="right-bar fr">
                <div class="right-bar-time inner-align fl">{{timeStamp |formatterTime}}</div>
                <div class="right-bar-help inner-align fl">
                    {{username}}
                </div>
                <div class="right-bar-role inner-align fl">
                    <form action="/login" method="post">
                        <input type="submit" value="">
                    </form>
                </div>
            </div>
            <slot name="dropMenu"></slot>
        </header>
    `,
    mounted:function(){
        var _this=this;
        this.$nextTick(function(){
            _this.getTimeStamp();
            _this.getName();
            setInterval(function(){
                _this.getTimeStamp();
            },1000*60)
            
        })
    },
    methods:{
        getTimeStamp:function(){
            var _this=this;
            var success=function(res){
                _this.timeStamp=res.data.time;
                //console.log(res.data);
            };
            var error=function(e){
                console.log('加载时间戳出错了');
            };

            this.$http.get(URL+'/time/getTime').then(success,error);
        },
        getName:function(){
            var _this=this;
            var success=function(res){
                _this.username=res.data.username;
                //console.log(res.data);
            };
            var error=function(e){
                console.log('加载用户名出错了');
            };
            this.$http.get(URL+'/system/getuserinfo').then(success,error);
        }
    }
});

/*下拉菜单*/
Vue.component('drop-menu',{
    props:{
    	menulist:{
    		type:Array,
    		default:function(){
    			return [];
    		}
    	},
    	deftitle:{
    		type:String,
    		default:function(){
    			return '';
    		}
    	},
        sendname:{
            type:String,
            default:function(){
                return '';
            }
        },
        type:{
            type:String,
            default:function(){
                return '';
            }
        }
    },
    data:function(){
        return {
            title:this.deftitle,
            bOk:false,
            list:this.menulist,
            name:this.sendname,
            typeName:this.type
        }
    },
    mounted:function(){
        var _this=this;
        this.$nextTick(function(){
            _this.update();
        })
    },
    methods:{
        update:function(){
            var item=getStore(this.typeName);
            if(item){
                this.title=item[0];
            }
        },
        open:function(){
            this.bOk=!this.bOk;
        },
        show:function(item){
            var _this=this;
            this.title=item[0];
            this.bOk=false;
            bus.$emit(_this.name,item[1]);
            setStore(_this.typeName,item);
        }
    },
    template:`
    <div class=" pressure-input border">
            <p class="pressure-input-text pressure-input-drop" @click="open">
				{{title}}
            </p>
            <ul class="pressure-input-list" v-show="bOk">
                <li class="pressure-input-item" v-for="item in list"  @click="show(item)">
                {{item[0]}}</li>
            </ul>
    </div>`
});

/*当前用气量和预计用气量组件*/
Vue.component('gas-component',{
    props:{
        msg:{
            type:Object,
            default:function(){
                return {};
            }
        },
        unit:{
            type:Boolean,
            default:function(){
                return true
            }
        }
    },
    filters:{
        keepTwo:function(val){
            return Number(val).toFixed(1)
        },
        formatterVal:function(val){
            return val/Math.pow(10,5);
        }
    },
    data:function(){
        return {
            message:this.msg,
            flag:this.unit
        }
    },
    template:`
        <div class="main-item-data-content outter-align clearfix">
            <p class="fl main-item-data-current">当前用气量 <br><span class="current-data">{{msg.cur_gas |keepTwo}}</span></p>
            <p class="fl main-item-data-prediction" v-if="unit">预计用气量 <br><span class="prediction-data">{{msg.gas_prediction|keepTwo}}-{{msg.delta|keepTwo}}</span></p>
            <p class="fl unit"><span>X10<sup>3</sup>m<sup>3</sup>/h</span></p>
        </div>
    `
});

/*产用交互组件*/
Vue.component('production-component',{
	props:{

	},
	data:function(){
		return {
			proVal:'',
            useVal:'',
            viewId:'pro_'+uuid(8,64),
            viewChart:null
		}
	},
    filters:{
        formatterVal:function(val){
            return val/Math.pow(10,4);
        },
        keepVal:function(val){
            return Number(val).toFixed(1)
        }
    },
	mounted:function(){
		this.$nextTick(function(){
            var _this=this;
            _this.getProductData();
            setTimeout(function(){
                _this.initViewChart();
                _this.getViewChartData();
            },3000);
            setInterval(function(){
                _this.getViewChartData();
            },1000*60*60)
            setInterval(function(){
               _this.getProductData(); 
            },3000);
		})
	},
	template:`
		<div class="input-output skin2 border clearfix posSup">
            <div class="product fl">
                <h3 class="product-title">产 (m<sup>3</sup>/h)</h3>
                <div class="product-data">
                    <p class="product-data-val">{{proVal|formatterVal |keepVal}}<span class="unit"> 万</span></p>
                    <span class="product-status"></span>
                </div>
            </div>
            <div class="use fl">
                <h3 class="use-title">用（m<sup>3</sup>/h）</h3>
                <div class="use-data">
                    <p class="use-data-val">{{useVal|formatterVal |keepVal}}<span class="unit">万</span></p>
                    <span class="use-status"></span>
                </div>
            </div>
            <div class="pro-legend posSub"></div>
            <div class="product-viewchart fl" :id="viewId"></div>
        </div>
	`,
	methods:{
        initViewChart:function(){
            this.viewChart=new Chart(this.viewId,{
                type:'line',
                data:produce,
                baseOption:productOption
            });
        },
        getViewChartData:function(){
            var _this=this;
            var success=function(data){
                var data=data;
                var proData=data.produce;
                var useData=data.use;
                var mergeArr=proData.concat(useData);
                var mergeAxis=getAxis(mergeArr);
                var min=Math.min.apply(null,mergeAxis.dataY);
                var max=Math.max.apply(null,mergeAxis.dataY);

                _this.viewChart.loadRange({max:max,min:min})
                var proAxis=getAxis(proData);
                var useAxis=getAxis(useData);

                _this.viewChart.loadX(proAxis.dataX,'h');
                _this.viewChart.loadData('产',proAxis.dataY);
                _this.viewChart.loadData('用',useAxis.dataY);
            };
            var error=function(e){
                console.log(e);
            }
            $.ajax({
                url:URL+'/coalgas/history',
                type:'post',
                success:success,
                error:error
            });
        },
		getProductData:function(){
            //console.log(1)
            var _this=this;
            var proId=blastIdCollection['gas_total']['gas_produce'];
            var useId=blastIdCollection['gas_total']['gas_use'];
			var success=function(res){
                _this.proVal=res[proId][1];
                _this.useVal=res[useId][1];
			};
			var error=function(){
				console.log('产用交互数据出错了')
			};

			// this.$http.post(URL+'/blast/realPoint',{
			// 	blastGroupId:[proId,useId].toString()
			// }).then(success,error);

            $.ajax({
                url:URL+'/blast/realPoint',
                type:'post',
                data:{
                    blastGroupId:[proId,useId].toString()
                },
                success:success,
                error:error
            })
		}
	}
});

/*主管压力放散*/
Vue.component('pressure-component',{
    props:{},
    template:`
        <div class="pressure">
            <div class="pressure-title outter-top  outter-bottom clearfix">
                <h2 class="common-title fl">主管压力/放散</h2>
                <div class="pressure-legend fl pressure-legend1-des">
                    <div class="fl legend-des">
                        <span class="pressure-legend1-icon legend-icon fl"></span>
                        <span class="fl">实际</span>
                    </div>
                    <div class="fl pressure-legend2-de">
                        <span class="pressure-legend2-icon legend-icon fl"></span>
                        
                        <span class="fl">预测</span>
                    </div>
                </div>
                <drop-menu :menulist="sel" deftitle="1小时前" :sendname="sendName" type="pressure" class="fr" v-if="false"></drop-menu>
            </div>
            <div class="pressure-content skin2 border">
                <ul class="clearfix pressure-data">
                    <li class="fl pressure-data-item pressure-data-item-border">3号TRT压力 <span class="pressure-data-item-all">{{pressureReal |keepOne}} kPa</span></li>
                    <li class="fl pressure-data-item">平均放散开度<span class="pressure-data-item-all"> {{fangsanReal   |keepOne}}</span></li>
                </ul>
                <div class="pressure-chart" :id="chartId"></div>
            </div>
        </div>
    `,
    data:function(){
        return {
            chartId:'pressure_'+uuid(8,64),
            pressureChart:null,
            historyData:{},
            getHour:1,
            pressureReal:0,
            fangsanReal:0,
            sendName:'hour',
            sel:[
                ['1小时前','1'],
                ['2小时前','2'],
                ['4小时前','4'],
                ['8小时前','8']
            ]
        }
    },
    filters:{
        keepOne:function(val){
            return Number(val).toFixed(1);
        },
    },
    mounted:function(){
        var _this=this;
        this.$nextTick(function(){
            _this.getTime();
            _this.updateHour();
            setTimeout(function(){
                _this.initPressureChart();

                _this.getAjaxData({
                    type:'history',
                    name:'压力历史',
                    ajaxName:'pressure',
                    hour:_this.getHour
                });
                _this.getAjaxData({
                    type:'history',
                    name:'放散历史',
                    ajaxName:'fangsan',
                    hour:_this.getHour
                });

                _this.getAjaxData({
                    type:'baseLine',
                    name:'压力历史',
                    ajaxName:'pressure',
                    hour:_this.getHour
                });
                /*_this.getAjaxData({
                    type:'prediction',
                    name:'压力预测',
                    ajaxName:'pressure',
                    hour:_this.getHour
                });*/
            },2000);

            setInterval(function(){
                _this.getAjaxData({
                    type:'realPoint',
                    name:'压力历史',
                    ajaxName:'pressure',
                    hour:_this.getHour
                });
                _this.getAjaxData({
                    type:'realPoint',
                    name:'放散历史',
                    ajaxName:'fangsan',
                    hour:_this.getHour
                });
                /*_this.getAjaxData({
                    type:'prediction',
                    name:'压力预测',
                    ajaxName:'pressure',
                    hour:_this.getHour
                });*/
                // _this.getAjaxData({
                //     type:'prediction',
                //     name:'放散预测',
                //     ajaxName:'fangsan',
                //     hour:_this.getHour
                // });
            },3000)
        })
    },
    methods:{
        updateHour:function(){
            var item=getStore('pressure');
            if(item){
                this.getHour=item[1];
            }
        },
        getTime:function(){
            var _this=this;
            bus.$on(this.sendName,function(val){
                _this.getHour=val;
            })
        },
        initPressureChart:function(){
            this.pressureChart=new Chart(this.chartId,{
                type:'line',
                data:pressure,
                baseOption:pressureOption
            });
        },
        getAjaxData:function(config){
            // {
            //     type:'history/prediction/realPoint',
            //     name:'pressure/fangsan',
            //     hour:1/2/4/8
            // }
            //var URL="../data";
            var _this=this;
            var success=function(data){
                var data=data;
                if(config.type=='history'){
                    //存储历史数据
                    _this.historyData[config.name+'_'+config.type]=data;
                    var axisHistory=getAxis(data);
                    if(config.ajaxName=='pressure'){
                        _this.pressureChart.loadX(axisHistory.dataX);
                    }
                }
                /*if(config.type=='prediction'){
                    var axisForecast=getAxis(data);
                    if(config.name=='压力预测'){
                        _this.pressureChart.loadX(axisForecast.dataX);
                    }
                    _this.pressureChart.loadData(config.name,axisForecast.dataY);
                }*/
                if(config.type=='realPoint'){
                    var historyData=_this.historyData[config.name+'_history'];
                    historyData.shift();
                    historyData.push(data[0]);
                    var axisReal=getAxis(historyData);
                    if(config.ajaxName=='pressure'){
                        _this.pressureReal=data[0][1];
                        _this.pressureChart.loadX(axisReal.dataX)
                    }
                    if(config.ajaxName=='fangsan'){
                        _this.fangsanReal=data[0][1];
                    }
                    _this.pressureChart.loadData(config.name,axisReal.dataY);
                }
                
                if(config.type=='baseLine'){
                    _this.pressureChart.loadBaseLine(config.name,{
                        data:data
                    });
                }
            };
            var error=function(e){
                 console.log('加载'+config.ajaxName+'_'+config.type+'出错了');
            }

            $.ajax({
                url:URL+'/coalgas/'+config.ajaxName+'/'+config.type,
                type:'get',
                data:{
                    history:config.hour*3600*Math.pow(10,3)
                },
                success:success,
                error:error
            })
        }
    }
})

/*消息中心*/
/*消息中心宽*/
Vue.component('message-center',{
    props:{
        'msg':{
            type:Array,
            default:function(){
                return [];
            }
        },
        srcdata:{
            type:String,
            default:function(){
                return '';
            }
        }
    },
    data:function(){
        return {
            width:'',
            message:[],
            canceldata:false,
            currIndex:0,
            resonList:[],
            reasonVal:'',
            subId:'',
            srcData1:this.srcdata,
            timeStamp:0
        }
    },
    watch:{
        msg:{
            handler:function(val){
                this.message=val;
            },
            deep:true
        }
    },
    filters:{
        keepTwo:function(val){
            return val.toFixed(2);
        },
        formatterTime:function(val){
            var val=Math.abs(val);
            var date=new Date(val);
            var month=date.getMonth()+1;
            var day=date.getDate();
            var hour=date.getHours();
            var min=date.getMinutes();
            return toDou(month)+"-"+toDou(day)+" "+toDou(hour)+":"+toDou(min);
        },
        formatterVal:function(val){
            //var val=Math.abs(val);
            return val/Math.pow(10,4)
        },
    },
    mounted:function(){
        var _this=this;
        this.$nextTick(function(){
            _this.getTimeStamp();
            setInterval(function(){
                _this.getTimeStamp();
            },1000*60)
        })
    },
    template:`
    <div class="broadcast" id="broadcast">

        <div class="clearfix outter-top">
            <div class="fl">
                <!--<h3 class="fl broadcast-font18" @click="sendMsg('mine')">与我相关消息&nbsp</h3>-->
                <h3 class="fl broadcast-font14" @click="sendMsg('all')">全部消息</h3>
            </div>
            <div class="fr">
                <p class="fl broadcast-font14 broadcast-mes active">当前(<span>{{message.length}}</span>)</p>
                <p class="fl broadcast-font14 broadcast-mes"><a :href="srcData1">&nbsp;&nbsp;历史</a></p>
            </div>
        </div>
        <div class="broadcast-content skin2    highlight-border" id="broadcast_content" style="display:block;">
            <ul class="title-list clearfix">
                <li class="title-name w320 title-bg mr2 fl">
                    <a href="javascript:;">标题</a>
                </li>
                <li class="title-describe w200 title-bg mr2 fl">
                    <a href="javascript:;">发生时间</a>
                </li>
                <li class="title-time w200 title-bg mr2 fl">
                    <a href="javascript:;">预计产用气波动</a>
                </li>
                <li class="title-prediction w576 title-bg mr2 fl">
                    <a href="javascript:;">详细信息</a>
                </li>
                <li class="title-status w99 title-bg fl">
                    <a href="javascript:;">操作</a>
                </li>
            </ul>
            <div  class="contents" style="width:1404px;">
                <ul class="content-list" id="content_list">
                    <li class="content-item conent-list-li clearfix" :class="[timeStamp-item.start_time<300000?'backgroundR':'']"  v-for="(item,index) in message">
                        <p class="content-name fl w320 mr2">
                        【{{item.device_name}}】{{item.title}}
                        </p>
                        <p class="content-descrbie fl w200 mr2">{{item.start_time |formatterTime}}</p>
                        <p class="content-ascription fl w200 mr2">{{item.prediction |formatterVal |keepTwo}}x10<sup>4</sup>m<sup>3</sup>/h</p>
                        <div class="fl w576">
                            <div class="content-prediction-scroll">
                               {{item.description}}
                            </div>
                        </div>
                        <p class="content-operate fl w99">
                            <a href="javascript:;" class="content-operate-msg fl" v-if="false"></a>
                            <a href="javascript:;" v-if="item.cancelable" class="content-operate-close fl" @click="cancel(item,index)"></a></p>
                        <div class="cancel-popup border"  v-show="canceldata">
                            <span>操作人 </span> ：&nbsp&nbsp<select name="" id="" class="can-select border" disabled="false">
                            <option value="" v-for="reason in resonList" >{{reason.content}}</option>  
                        </select>
                            </br>
                            <span>取消原因</span>：<select name="" id="" class="can-select border" @change="getVal" v-model="reasonVal">
                            <option value="" v-for="reason in resonList" :value="reason.id">{{reason.content}}</option>
                        </select>
                            <div class="clearfix can-tip">
                                <p class="fl can-button can-icon border" @click="dis">取消</p>
                                <p class="fl can-button can-define border" @click="define(currIndex)">确定</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div> 
    </div>  
        `,
    methods:{
        sendMsg:function(val){
            bus.$emit('msgType',val);
        },
        getVal:function(){

        },
        /*信息取消*/
        cancel:function(item,index){
            this.currIndex=index;
            this.canceldata=true;
            var type=item.type;
            this.subId=item.sub_evt_id;
            var success=function(res){
                //console.log('取消原因'+res.data);
                this.resonList=res.data;
                this.reasonVal=this.resonList[0].id;
            };
            var error=function(e){
                console.log('取消事件原因出错了')
            };
            this.$http.get(URL+'/event/reason/'+type).then(success,error);
        },
        /*弹出框取消*/
        dis:function(){
            this.canceldata=false;
        },
        /*弹出框确认*/
        define:function(index){
            this.canceldata=!this.canceldata;
            this.message.splice(index,1);
            var success=function(res){};
            var error=function(e){
                console.log('弹出框确定出错了')
            };
            
            this.$http.post(URL+'/message/cancellation',{sub_evt_id:this.subId,reason:this.reasonVal}).then(success,error);
            
        },
        getTimeStamp:function(){
            var _this=this;
            var success=function(res){
                _this.timeStamp=res.data.time;
                //console.log(res.data);
            };
            var error=function(e){
                console.log('加载时间戳出错了');
            };
            this.$http.get(URL+'/time/getTime').then(success,error);
        }
    }
});
/*消息中心窄*/
Vue.component('my-message',
    {
    props:['msg'],
    data:function(){
        return {
            width:'',
            message:this.msg,
            canceldata:false,
            currIndex:0,
            resonList:[],
            reasonVal:'',
            subId:'',
            timeStamp:0
        }
    },
    mounted:function(){
        var _this=this;
        this.$nextTick(function(){
            _this.getTimeStamp();
            setInterval(function(){
                _this.getTimeStamp();
            },1000*60)

        })
    },
    watch:{
        msg:{
            handler:function(val){
                this.message=val;
            },
            deep:true
        }
    },
    template:`
    <div  class="broadcast outter-top">
        <div class="clearfix">
            <div class="fl">
                <h3 class="fl broadcast-font18" @click="sendMsg('all')">&nbsp全部消息</h3>
                <!--<h5 class="fl broadcast-font14" @click="sendMsg('mine')">与我相关消息&nbsp</h5>-->
                
            </div>
            <div class="fr">
                <p class="fl broadcast-font14 broadcast-mes active">当前(<span>{{message.length}}</span>)</p>
                <p class="fl broadcast-font14 broadcast-mes"><a href="history.html">历史</a></p>
            </div>
        </div>
        <div class="broadcast-content skin2 highlight-border" id="broadcast_content">
            <ul class="title-list clearfix">
                <li class="title-name w200 title-bg mr2 fl">
                    <a href="javascript:;">标题</a>
                </li>
                <li class="title-describe w100 title-bg mr2 fl">
                    <a href="javascript:;">发生时间</a>
                </li>
                <li class="title-time w120 title-bg mr2 fl">
                    <a href="javascript:;">预计产用气波动</a>
                </li>
                <li class="title-prediction w514 title-bg mr2 fl">
                    <a href="javascript:;">详细信息</a>
                </li>
                <li class="title-status w80 title-bg fl">
                    <a href="javascript:;">操作</a>
                </li>
            </ul>
            <div class="contents border" id="contents" :style="">
            <ul class="content-list" id="content_list">
                <li class="content-item conent-list-li clearfix" :class="[timeStamp-item.start_time<300000?'backgroundR':'']" v-for="(item,index) in message">
                    <p class="content-name fl w200 mr2">
                    【{{item.device_name}}】{{item.title}}
                    </p>
                    <p class="content-descrbie fl w100 mr2">{{item.start_time |formatterTime}}</p>
                    <p class="content-ascription fl w120 mr2">{{item.prediction|formatterVal|keepTwo}}x10<sup>4</sup>m<sup>3</sup>/h</p>
                    <div class="fl content-status">
                        <div class="content-prediction-scroll">
                            {{item.description}}
                        </div>
                    </div>
                    <p class="content-operate fl w76">
                        <!--<a href="javascript:;" class="content-operate-msg"></a>-->
                        <a href="javascript:;" class="content-operate-close" v-show="item.cancelable" @click="cancel(item,index)"></a></p>
                    <div class="cancel-popup border" v-show="canceldata">
                        <span>操作人 </span> ：&nbsp&nbsp<select name="" id="" class="can-select border">
                        <option value="" v-for="reason in resonList" >{{reason.content}}</option>  
                    </select>
                        </br>
                        <span>取消原因</span>：<select name="" id="" class="can-select border" @change="getVal" v-model="reasonVal">
                        <option value="" v-for="reason in resonList" :value="reason.id">{{reason.content}}</option>
                    </select>
                        <div class="clearfix can-tip">
                            <p class="fl can-button can-icon border" @click="dis">取消</p>
                            <p class="fl can-button can-define border" @click="define(currIndex)">确定</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div> 
        </div>
    </div>  
        `,
    filters:{
        formatterTime:function(val){
            var val=Math.abs(val);
            var date=new Date(val);
            var month=date.getMonth()+1;
            var day=date.getDate();
            var hour=date.getHours();
            var min=date.getMinutes();
            return toDou(month)+"-"+toDou(day)+" "+toDou(hour)+":"+toDou(min);
        },
        keepTwo:function(val){
            return val.toFixed(2);
        },
        formatterVal:function(val){
            //var val=Math.abs(val);
            return val/Math.pow(10,4)
        }
    },
    methods:{
        sendMsg:function(val){
            bus.$emit('msgType',val);
        },
        getVal:function(){

        },
        /*信息取消*/
        cancel:function(item,index){
            this.currIndex=index;
            this.canceldata=true;
            var type=item.type;
            this.subId=item.sub_evt_id;
            var success=function(res){
                //console.log('取消原因'+res.data);
                this.resonList=res.data;
                this.reasonVal=this.resonList[0].id;
            };
            var error=function(e){
                console.log('取消事件原因出错了')
            };
            this.$http.get(URL+'/event/reason/'+type).then(success,error);
        },
        /*弹出框取消*/
        dis:function(){
            this.canceldata=false;
        },
        /*弹出框确认*/
        define:function(index){
            this.canceldata=!this.canceldata;
            this.message.splice(index,1);
            var success=function(res){};
            var error=function(e){
                console.log('弹出框确定出错了')
            };
            // $.ajax({
            //     url:'http://192.168.100.179:8082/message/cancellation',
            //     type:'post',
            //     data:{sub_evt_id:this.subId,reason:this.reasonVal},
            //     success:success,
            //     error:error
            // })
            // this.$http(
            //     {
            //         url:'http://192.168.100.179:8082/message/cancellation',
            //         method: 'POST',
            //         headers: {
            //             'Content-Type': 'application/json'
            //         },
            //         data:{sub_evt_id:this.subId,reason:this.reasonVal}
            //     }).then(success,error);
             this.$http.post(URL+'/message/cancellation',{sub_evt_id:this.subId,reason:this.reasonVal}).then(success,error);
            
        },
        getTimeStamp:function(){
            var _this=this;
            var success=function(res){
                _this.timeStamp=res.data.time;
                //console.log(res.data);
            };
            var error=function(e){
                console.log('加载时间戳出错了');
            };
            this.$http.get(URL+'/time/getTime').then(success,error);
        }
    }
});

/*右侧表格组件*/
Vue.component('table-component',
    {
        props:['msg'],
        template:`
                <dl>
                    <dt class="com-w119 col-normal border clearfix"><p class="fl comp-w60 com-bg mr1">轧槽信息</p><p class="fl com-w54 com-bg">要求</p></dt>
                     <dd class="com-w119-rb col-normal clearfix" v-for="item in message">
                        <p class="fl comp-w63 bor-r">{{item.nummber}}</p>
                        <p class="fl com-w55">{{item.message}} 吨</p>
                    </dd>
                </dl>
                `,
        data:function(){
        return {
            message:this.msg
            }
        }
    }
);

//产气归因
function Chart3(chartId,url){
    var myChart=echarts.init(document.getElementById(chartId));
    $.get(url, function (data) {
        //var data=eval('('+data+')')；
        myChart.setOption({
            title: {
                show:false,
                text: '产气波动归因'
            },
            legend:{
                show:false
            },
            grid:{
                left:50,
                top:55,
                right:30,
                bottom:30
            },
            tooltip:{
                show:true,
                formatter:function(params){
                   var str = params.seriesName+' : '+Number(params.data).toFixed(1)
                    return str
                }
            },
            xAxis: {
                data: data[0].map(function (item) {
                    return item[0];
                }),
                axisLine:{
                    lineStyle:{
                        color:'#b0e9fe'
                    }
                },
                axisLabel:{
                    align:'center',
                    inside:false
                },
                axisTick:{
                    inside:true,
                    alignWithLabel:true

                }
            },
            yAxis: {
                splitLine: {
                    show: false
                },
                axisLabel:{
                    show:true,
                    inside:false,
                    align:'',
                    color:'#b0e9fe',
                    fontSize:12,
                    formatter:function (value, index) {
                        //var val=Math.floor(value/Math.pow(10,4));
                        //console.log(value)
                        return value;
                    }
                },
                //name:'X10⁴',
                name:'%',
                nameTextStyle:{
                    color:'#b0e9fe',
                    fontSize:14
                },
                axisLine:{
                    lineStyle:{
                        color:'#b0e9fe',
                    }
                },
                axisTick:{
                    inside:true
                }

            },
            toolbox: {
                show:false,
                left: 'center',
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },

            series: [
                {
                    name: '实际波动辅助',
                    type: 'bar',
                    smooth:true,
                    barWidth:40,
                    barGap:'-100%',
                    stack:'real',
                    data: data[0].map(function (item,index) {
                        if(index==0){
                            difference= item[1];
                            return 0;
                        }else{
                            difference= difference - data[0][index][1];
                            return difference;
                        }
                    }),
                    label:{
                        normal:{
                            color:'#fff'
                        }

                    },
                    showSymbol:false,
                    itemStyle:{
                        normal:{
                            color:'rgba(211,29,17,0)',
                            borderColor:'rgba(0,197,246,0)',
                            borderWidth:1
                        }
                    }
                },
                {
                    name: '波动贡献度',
                    type: 'bar',
                    smooth:true,
                    barWidth:40,
                    barGap:'-108%',
                    stack:'real',
                    data: data[0].map(function (item,index) {

                        return item[1];
                    }),
                    label:{
                        normal:{
                            color:'#fff'
                        }
                    },
                    showSymbol:false,
                    itemStyle:{
                        normal:{
                            color:function(idx){
                                var color = ['#01c5f7','#8c04c6','#6822e4','#e8830d','#87c313','#2e35e4'];
                                return color[(idx.dataIndex) % (color.length)]
                          }
                        }
                    },
                }]
        });
    });
}
